<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/View</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show" data-longname="module:ol/View"
                            data-name="ol/view">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_View.html">ol​/View</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="animation"><a href="module-ol_View.html#~Animation">Animation</a>
                                    <li data-name="animationoptions"><a
                                            href="module-ol_View.html#~AnimationOptions">AnimationOptions</a>
                                    <li data-name="constraints"><a
                                            href="module-ol_View.html#~Constraints">Constraints</a>
                                    <li data-name="fitoptions"><a href="module-ol_View.html#~FitOptions">FitOptions</a>
                                    <li data-name="state"><a href="module-ol_View.html#~State">State</a>
                                    <li data-name="viewobjecteventtypes"><a
                                            href="module-ol_View.html#~ViewObjectEventTypes">ViewObjectEventTypes</a>
                                    <li data-name="viewoptions"><a
                                            href="module-ol_View.html#~ViewOptions">ViewOptions</a>
                                    <li data-name="viewstatelayerstateextent"><a
                                            href="module-ol_View.html#~ViewStateLayerStateExtent">ViewStateLayerStateExtent</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_View.html">Module: ol/View</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/View
                        </h2>
                        <br>




                        <!-- <div class="row p-3 ">
                        <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div>
            </div> -->
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>










                        <h3 class="subsection-title">Classes</h3>

                        <dl>
                            <dt><a href="module-ol_View-View.html">View</a></dt>
                            <dd></dd>
                        </dl>











                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Animation">
                                    </div>
                                    <h4 class="name">
                                        Animation<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">

                                <div class="description">
                                    <p>动画配置</p>
                                </div>



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>sourceCenter</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>源中心。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>targetCenter</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>目标中心。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>sourceResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p> 源分辨率。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>targetResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>目标分辨率。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>sourceRotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>源旋转角度。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>targetRotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>目标旋转角度。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>anchor</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>锚。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>start</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>开始。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>duration</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>持续时间。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>complete</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>完成。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>easing</code></td>


                                                    <td class="type">


                                                        <span class="param-type">function</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>缓冲。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>callback</code></td>


                                                    <td class="type">


                                                        <span class="param-type">function</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>回调。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~AnimationOptions">
                                    </div>
                                    <h4 class="name">
                                        AnimationOptions<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>center</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画末尾的视图中心。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画结束时视图的缩放级别。这优先于
                                                            <code>resolution</code>。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画末尾视图的分辨率。如果设置了<code>zoom</code> 则将忽略此选项。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>rotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画末尾视图的旋转角度。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>anchor</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>可选的锚点，用于在旋转或分辨率动画期间保持固定。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>duration</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 1000)


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画的持续时间（以毫秒为单位）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>easing</code></td>


                                                    <td class="type">


                                                        <span class="param-type">function</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画期间使用的缓动函数(默认为<a
                                                                href="module-ol_easing.html#.inAndOut"><code>inAndOut</code></a>)。该函数将为每个帧调用，并带有一个表示动画持续时间分数的数字。该函数应返回介于0和1之间的数字，表示向目标状态的进度。
                                                        </p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Constraints">
                                    </div>
                                    <h4 class="name">
                                        Constraints<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>center</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_centerconstraint.html#~Type">Type</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Center.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_resolutionconstraint.html#~Type">Type</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Resolution.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>rotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_rotationconstraint.html#~Type">Type</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>旋转角度。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~FitOptions">
                                    </div>
                                    <h4 class="name">
                                        FitOptions<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>size</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_size.html#~Size">Size</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>将计算区域应适应的框的像素尺寸。默认为视图关联的地图的大小。如果没有地图或多个地图与视图关联，请提供所需的框大小（例如
                                                            <code>map.getSize()</code>）.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>padding</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;number></span>



                                                        <br>(defaults to [0, 0, 0, 0])


                                                    </td>

                                                    <td class="description last">
                                                        <p>视图内部要清除的内边距（以像素为单位）。数组中的值是顶部、右侧、底部和左侧的内边距。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>nearest</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>如果视图选项<code>constrainResolution</code>为<code>true</code>,
                                                            则获取最接近的范围，而不是实际上适合视图的最近范围。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>我们缩放到所需的最小分辨率。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>我们缩放到所需的最大缩放级别。如果给出了<code>minResolution</code>，则此属性将被忽略。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>duration</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画的持续时间（以毫秒为单位）。默认情况下，没有动画到目标范围。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>easing</code></td>


                                                    <td class="type">


                                                        <span class="param-type">function</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画期间使用的缓动函数（默认为<a
                                                                href="module-ol_easing.html#.inAndOut"><code>inAndOut</code></a>）。
                                                            该函数将为每个帧调用，并带有一个表示动画持续时间分数的数字。该函数应返回介于0和1之间的数字，表示向目标状态的进度。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>callback</code></td>


                                                    <td class="type">


                                                        <span class="param-type">function</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>当视图处于最终位置时调用的函数。如果动画系列自行完成，则回调将带有<code>true</code>，如果被取消，则带有<code>false</code>。
                                                        </p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~State">
                                    </div>
                                    <h4 class="name">
                                        State<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>center</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>中心（在视图投影坐标中）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>projection</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_proj_Projection-Projection.html">Projection</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Projection.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>分辨率(Resolution).</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>nextCenter</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画系列中的下一个中心。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>nextResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画系列中的下一个分辨率。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>nextRotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>动画系列中的下一个旋转角度。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>rotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>旋转角度。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Zoom.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ViewObjectEventTypes">
                                    </div>
                                    <h4 class="name">
                                        ViewObjectEventTypes<span
                                            class="type-signature type module:ol/objecteventtype~types">{<a
                                                href="module-ol_ObjectEventType.html#~Types">Types</a>}</span> <span
                                            class="type-signature type 'change:center'">{'change:center'}</span> <span
                                            class="type-signature type 'change:resolution'">{'change:resolution'}</span>
                                        <span class="type-signature type 'change:rotation'">{'change:rotation'}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">





















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ViewOptions">
                                    </div>
                                    <h4 class="name">
                                        ViewOptions<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>center</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_coordinate.html#~Coordinate">Coordinate</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>视图的初始中心。如果用户投影未设置，则使用<code>projection</code>选项指定中心的坐标系。如果未设置此选项，则不会获取图层源，但稍后可以使用
                                                            <code>#setCenter</code>设置中心。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>constrainRotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>
                                                        |

                                                        <span class="param-type">number</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>旋转约束。<code>false</code>表示无约束。<code>true</code>表示无约束，但接近零时固定为零。一个数字将旋转约束为该数字的数值。例如，<code>4</code>将旋转约束为0、90、180和270度。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>enableRotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>启用旋转。如果为<code>false</code>，则使用始终将旋转设置为零的旋转约束。如果
                                                            <code>enableRotation</code>为<code>false</code>，则<code>constrainRotation</code>选项无效。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>extent</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_extent.html#~Extent">Extent</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">

                                                        <p>约束视图的范围，换句话说，这个范围之外的任何东西都不会出现在地图上。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>constrainOnlyCenter</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">

                                                        <p>如果为true，范围约束将只应用于视图中心，而不应用于整个范围。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>smoothExtentConstraint</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">

                                                        <p>如果为true，范围约束将平滑应用，即允许视图稍微超出给定范围。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>T用于确定分辨率约束的最大分辨率。它与<code>minResolution</code> (或
                                                            <code>maxZoom</code>)
                                                            和<code>zoomFactor</code>一起使用。如果未指定，则以256x256
                                                            px的瓦片大小计算投影的有效范围。
                                                            如果投影是Spherical Mercator（默认值），则
                                                            <code>maxResolution</code>默认为<code>40075016.68557849 / 256 = 156543.03392804097</code>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于确定分辨率约束的最小分辨率。它与<code>maxResolution</code> (or
                                                            <code>minZoom</code>) and
                                                            <code>zoomFactor</code>一起使用。如果未指定，则假设有29个缩放级别（缩放因子为2）。如果投影是Spherical
                                                            Mercator（默认值），则<code>minResolution</code>默认为
                                                            <code>40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253</code>。
                                                        </p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 28)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于确定分辨率约束的最大缩放级别。它与<code>minZoom</code> (or
                                                            <code>maxResolution</code>) and
                                                            <code>zoomFactor</code>一起使用。请注意，如果还提供了<code>minResolution</code>，则它将优先于<code>maxZoom</code>。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>用于确定分辨率约束的最小缩放级别。它与<code>maxZoom</code> (or
                                                            <code>minResolution</code>) and
                                                            <code>zoomFactor</code>一起使用。请注意，如果还提供了<code>maxResolution</code>，则它将优先于<code>minZoom</code>。
                                                        </p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>multiWorld</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>如果为<code>false</code>，视图将被约束，以便只显示一个世界，并且不能将边缘置于视线之外。如果为
                                                            <code>true</code>地图在低缩放级别上可能显示多个世界。仅在<code>projection</code>为全局时使用。
                                                            请注意，如果还提供了<code>extent</code>，则给予其优先级。
                                                        </p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>constrainResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">

                                                        <p>如果为true, 在交互之后，视图将始终平滑地缩放到最近的缩放级别；false表示允许中间缩放级别。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>smoothResolutionConstraint</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">

                                                        <p>如果为true，将平滑地应用分辨率的min/max值，即允许视图略微超出给定的分辨率或缩放范围。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>showFullExtent</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">

                                                        <p>允许视图缩小以显示配置的完整范围。默认情况下，当视图配置有范围时，用户将无法缩小视图，以便在任何维度上超出范围。这意味着如果视口的高度或宽度与配置范围的纵横比不同，则整个范围可能不可见。如果showFullExtent为true，用户将能够缩小视图，以便超出配置范围的高度或宽度，但不能同时超出两者，从而允许显示整个范围。
                                                        </p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>projection</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_proj.html#~ProjectionLike">ProjectionLike</a></span>



                                                        <br>(defaults to 'EPSG:3857')


                                                    </td>

                                                    <td class="description last">

                                                        <p>投影。默认值为Spherical Mercator。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">

                                                        <p>视图的初始分辨率。单位是像素的<code>projection</code>单位(例如，每像素米)。设置此值的替代方法是设置<code>zoom</code>。如果既未定义此选项也未定义<code>zoom</code>，则不会获取图层源，但稍后可以使用<code>#setZoom</code>
                                                            or <code>#setResolution</code>进行设置。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolutions</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;number></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">

                                                        <p>确定缩放级别的分辨率（如果已指定）。数组中的索引对应于缩放级别，因此分辨率值必须按降序排列。它还通过最小和最大值约束分辨率。如果设置了<code>maxResolution</code>,
                                                            <code>minResolution</code>, <code>minZoom</code>,
                                                            <code>maxZoom</code>, and <code>zoomFactor</code>选项将被忽略。
                                                        </p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>rotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">

                                                        <p>视图的初始旋转角度（以弧度为单位）（顺时针方向旋转为正值，0表示北）。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">

                                                        <p>仅在未定义<code>resolution</code>时使用。用于计算视图初始分辨率的缩放级别。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zoomFactor</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 2)


                                                    </td>

                                                    <td class="description last">

                                                        <p>用于计算相应分辨率的缩放因子。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>padding</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;number></span>



                                                        <br>(defaults to [0, 0, 0, 0])


                                                    </td>

                                                    <td class="description last">

                                                        <p>填充（以CSS像素为单位）。如果地图视口边缘部分被其他内容（覆盖层）覆盖，此设置允许将视口中心从该内容中移开。值的顺序是顶部、右侧、底部、左侧。
                                                        </p>
                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ViewStateLayerStateExtent">
                                    </div>
                                    <h4 class="name">
                                        ViewStateLayerStateExtent<span
                                            class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">

                                <div class="description">
                                    <p>类似于<a href="module-ol_Map.html#~FrameState"><code>FrameState</code></a>,
                                        但只是<code>viewState</code> and <code>extent</code>（范围和视图状态）。</p>
                                </div>



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>viewState</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_View.html#~State">State</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>View state.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>extent</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_extent.html#~Extent">Extent</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Extent (in user projection coordinates).</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>layerStatesArray</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array&lt;<a
                                                                href="module-ol_layer_Layer.html#~State">State</a>></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Layer states.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>